import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form, Input, Table, Button,Row,Col,Pagination
} from 'antd';
import styles from './style.less';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';

const FormItem = Form.Item;
@Form.create()
export default class WriterList extends PureComponent {
  state = {
    pageNo:1,
    pageSize:10,
    nameOrPhone:"",
    loadMethod:()=>{},
    addWriter:(recode)=>{},
  };

  /**
   * 点击查询按钮查询数据
   * @param e
   */
  handleSearch = (e) => {
    const self = this;
    const pageNo = self.state.pageNo;
    const pageSize = self.state.pageSize;
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      var nameOrPhone = fieldsValue.nameOrPhone && fieldsValue.nameOrPhone.valueOf();
      if(nameOrPhone == undefined){
        nameOrPhone = "";
      }
      self.setState({
        nameOrPhone:nameOrPhone
      });
      console.log(nameOrPhone);
      this.props.onChange(pageNo,pageSize,nameOrPhone);
    });
  }

  /**
   * 分页查询的方法
   * @param page
   * @param pageSize
   */
  handleTableChange = (page, pageSize) => {
    const {nameOrPhone}  =  this.state;
    this.props.onChange(page, pageSize,nameOrPhone);
  }

  /**
   * 点击新增核销员的方法
   * @param record
   */
  addWriter = (record) => {
    this.props.addWriter(record);
  }

  /**
   * 生成查询的Form
   * @returns {XML}
   */
  renderSimpleForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Row gutter={16} style={{ marginBottom: '10px'}}>
        <Col className="gutter-row" span={24}>
          <Form onSubmit={this.handleSearch} layout="inline">
            <FormItem style={{ width:'100%'}}>
              <Row style={{ width:'100%'}}>
                <Col span={22} >
                  <FormItem label="姓名/手机号">
                    {getFieldDecorator('nameOrPhone')(
                      <Input placeholder="请输入核销员姓名或者手机号" />
                    )}
                  </FormItem>
                </Col>
                <Col span={2} >
                  <FormItem>
                    <Button type="primary" htmlType="submit">查询</Button>
                  </FormItem>
                </Col>
              </Row>
            </FormItem>
          </Form>
        </Col>
      </Row>
    );
  }
render() {
    let {checkUserListData,total ,pageNo ,pageSize} = this.props;

    const addWriterColumns = [{
      title: '昵称',
      dataIndex: 'nickName',
      key: 'nickName',
      }, {
        title: '账号(手机号)',
        dataIndex: 'phone',
        key: 'phone',
      }, {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (text, record) => {
        return <span>
          <a href="javascript:void(0)" onClick={() => this.addWriter(record)}>添加</a>
        </span>
      },
    }];

    const paginationProps = {
      showSizeChanger: true,
      pageSize:pageSize,
      total:total,
      current:pageNo,
      onChange:this.handleTableChange
    };

    return (
      <div>
        {this.renderSimpleForm()}
        <Row gutter={16}>
          <Col className="gutter-row" span={24}>
            <Table dataSource={checkUserListData} columns={addWriterColumns} style={{ width: '100%' }}
                   pagination={paginationProps}  />
          </Col>
        </Row>
      </div>
    );
  }
}
